<template>
	<view class="informationCollection">
		<view class="row">
			<image src="https://img.zhizhuangtong.com/project_media/img/xcx/khd/informationCollectionBag.png" mode=""
				class="bag"></image>

			<view class="rowCenter">
				<view class="padding">
					<text class="label">暖心房信息采集</text>
					<view class="desc">

						“暖心房”，是专为高寒高海拔地区特别是偏远分散的农牧区住宅量身定制的健康舒适型暖房子，是根据“供暖先保暖”的原则，对既有房屋进行保暖改造，再在保温系统中植入智能辅助发热装置进行远红外辐射发热供暖、光伏发电作为清洁能源供暖热源。
						室内温暖舒服，冬季可恒温18℃以上；可长期安全使用，无设备无故障免维护，使用简便不求人；采用光伏发电清洁能源供暖，自发自用，余电上网，供暖运行成本低，兼顾其它家庭电器用电，达到降成本、增收益目标；可保留传统取暖习俗，根据各户的喜好而定是否继续用柴火取暖，与远红外辐射热供暖可切换。
					</view>

					<view class="col">
						<text class="title">户主基本信息</text>
						<view :class="warmProgressData.basic==0?'isEditStyle':''" @click="tag(1)">
							<text>{{warmProgressData.basic==0?'未填写':'已填写'}}</text>
							<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png"></image>
						</view>
					</view>
					<view class="col" :class="warmProgressData.reform==0?'isEditStyle1':'isEditStyle2'" >
						<text class="title">改造房间确认</text>
						<view  @click="tag(2)">
							<text>{{warmProgressData.reform==0?'未填写':'已填写'}}</text>
							<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png"></image>
						</view>
					</view>
					<view class="col" :class="warmProgressData.photovoltaic==0?'isEditStyle1':'isEditStyle2'" >
						<text class="title">光伏位置确认</text>
						<view @click="tag(3)">
							<text>{{warmProgressData.photovoltaic==0?'未填写':'已填写'}}</text>
							<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png"></image>
						</view>
					</view>

				</view>
			</view>

			<view class="btn">
				<button @click="onDetails" :class="{
					          'isdisable': warmProgressData.basic === 1 && warmProgressData.reform === 1 && warmProgressData.photovoltaic === 1
					        }">查看详情</button>
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onUnload,
		onReady
	} from "@dcloudio/uni-app";


	import {
		progress,
		set_get
	} from '@/api/warm.js'
	import {
		ref,
		onMounted,
		watch
	} from 'vue';


	const isEdit = ref(false) //未填写
	const warmProgressData = ref({}) //暖心房采集进度
	onReady(() => {
		const token = uni.getStorageSync('token')
		const useInfo = uni.getStorageSync('useInfo')
		if (token && useInfo) {
			warmsIsGet() //暖心房是否开启采集
		}
	})

	// 暖心房是否开启采集
	const warmsIsGet = async () => {
		const res = await set_get()
		if (res.code === 1) {
			console.log('暖心房是否开启采集', res.data)
			// 1=开启,0=关闭  
			if (res.data.status == 1) {
				warmProgress() //获取采集进度
			} else {
				uni.redirectTo({
					url: '/pages/common/informationCollection/stopService',
				});
			}
		}
	}

	// 暖心房采集进度
	const warmProgress = async () => {
		const res = await progress()
		if (res.code === 1) {
			console.log('暖心房采集进度', res.data)
			warmProgressData.value = res.data
		}
		// uni.$u.toast('开始识别');
	}



	const tag = (type) => {
		let targetUrl = '';
		if (type == 1) {
			if (warmProgressData.value.basic == 0) {
				uni.navigateTo({
					url: '/pages/common/informationCollection/step1',
				});
			}
		}
		if (type == 2) {
			if (warmProgressData.value.basic == 1 && warmProgressData.value.reform == 0) {
				uni.navigateTo({
					url: '/pages/common/informationCollection/step2',
				});
			}

		}
		if (type == 3) {
			if (warmProgressData.value.reform == 1 && warmProgressData.value.photovoltaic == 0) {
				uni.navigateTo({
					url: '/pages/common/informationCollection/step3',
				});
			}
		}
	}

	// 查看详情
	const onDetails = () => {
		if (warmProgressData.value.basic == 1 && warmProgressData.value.reform == 1 && warmProgressData.value
			.photovoltaic == 1) {
			uni.navigateTo({
				url: '/pages/common/informationCollection/details'
			})
			return
		} else {
			wx.showToast({
				title: '请先填写采集信息后查看详情！',
				icon: 'none',
				duration: 2000
			});
		}
	}
</script>

<style scoped lang="less">
	.informationCollection {
		width: 100%;
		min-height: 100vh;

		.row {
			height: 100%;
			height: 420rpx;
			position: relative;

			.bag {
				width: 100%;
			}

			.rowCenter {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				overflow: auto;
				padding: 260rpx 20rpx 220rpx;
				box-sizing: border-box;

				.padding {
					width: 100%;
					height: 100%;
					backdrop-filter: saturate(180%) blur(20px);
					-webkit-backdrop-filter: blur(10px);
					background-color: rgba(255, 255, 255, 0.8);
					box-shadow: 0rpx 4rpx 30rpx 0rpx rgba(0, 0, 0, 0.02);
					border-radius: 20rpx;
					padding: 0 36rpx 36rpx;
					box-sizing: border-box;

					.label {
						width: 100%;
						height: 125rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 36rpx;
						color: #333333;
						line-height: 50rpx;
						text-align: left;
						font-style: normal;
					}

					.desc {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						line-height: 46rpx;
						text-align: left;
						font-style: normal;
						white-space: pre-wrap;
						margin-bottom: 47rpx;
					}
					

					.col {
						width: 100%;
						background: #F4F4F4;
						border-radius: 8rpx;
						margin-bottom: 30rpx;
						padding: 0 24rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 100rpx;

						.title {
							height: 100%;
							flex: 1;
							display: flex;
							align-items: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;
							text-align: left;
							font-style: normal;
						}

						view {
							opacity: 0.5;
							height: 100%;
							display: flex;
							align-items: center;

							text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 30rpx;
								color: #333333;
								line-height: 42rpx;
								text-align: left;
								font-style: normal;
							}

							image {
								width: 20rpx;
								height: 30rpx;
								margin-left: 20rpx;
							}
						}
						// 未填写
						.isEditStyle {
							opacity: 1;
							// border: 1px solid blue;
						}
						
					}
					
					// 未填写
					.isEditStyle1 {
						opacity: 0.5;
						// border: 1px solid blue;
					}
					.isEditStyle2{
						opacity: 1;
						// border: 1px solid red;
					}
				}
			}

			.btn {
				width: 100%;
				display: flex;
				justify-content: center;
				padding: 30rpx;
				box-sizing: border-box;
				position: fixed;
				left: 0;
				z-index: 2;
				bottom: constant(safe-area-inset-bottom);
				bottom: env(safe-area-inset-bottom);
				// bottom: calc(120rpx + env(safe-area-inset-bottom));
				// bottom: calc(120rpx + constant(safe-area-inset-bottom));

				button {
					width: 100%;
					height: 88rpx;
					background: linear-gradient(138deg, rgba(237, 165, 91, 0.5) 0%, rgba(237, 165, 91, 0.8) 100%);
					border-radius: 14rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 88rpx;
					font-style: normal;
					// opacity: 0.7;
					backdrop-filter: blur(10px) !important;
				}

				.isdisable {
					background: linear-gradient(138deg, rgba(237, 165, 91, 1) 0%, rgba(237, 165, 91, 1s) 100%);
				}

			}
		}

	}
</style>